<template>
	<view class="main">
		<text class="title">{{ title }}</text>
		<view class="step-title">
			<view></view>
			<text>审批业务</text>
		</view>
		<view class="content-all">
			<view class="content" v-for="(item, index) in updataData" :key="index">
				<text>{{ item.typeName }}</text>
				<view v-if="item.status == '2'" class="rejuct-reason">
					<view style="flex: 1;" :class="{ shenglue: !updataReason[index] }">
						<text class="rejuct-title">不通过原因：</text>
						<text class="L-main">{{ item.remark }}</text>
					</view>
					<text class="open-reason" v-show="!updataReason[index]" @click="changeReason(index)">展开></text>
					<text class="close-reason" v-show="updataReason[index]" @click="changeReason(index)">收起></text>
				</view>
				<button v-if="item.status == '2'" class="btn-upload" @click="upload(index)">上传</button>
				<button v-else class="btn-uploaded">已上传</button>
				<view class="upload-img" v-if="showImg[index]">
					<view class="files_list_group" v-show="updataImg[index]">
						<view v-for="(item2, index2) in updataData[index].imgUrls" :key="index2"
							style="position: relative;">
							<image :src="item2" mode="aspectFill" @click.stop="$previewImg(item2)"
								v-if="/jpg$|png$/.test(item2)">
							</image>
							<image src="../../static/file.png" mode="aspectFit" v-if="!/jpg$|png$/.test(item2)"
								@click="enclosure(item2,submitContent[index].fileName[index2])"></image>
							<text>{{ submitContent[index].fileName[index2] }}</text>
							<u-icon name="close-circle-fill" size="36" @click="deleteImg(index, index2)" class="del">
							</u-icon>
						</view>
					</view>
					<text class="open-image" v-show="!updataImg[index]" @click="changeImg(index)">展开 ﹀</text>
					<text class="close-image" v-show="updataImg[index]" @click="changeImg(index)">收起 ︿</text>
				</view>
			</view>
			<button class="btn-submit" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				updataReason: [],
				updataImg: [],
				imgUrls: [],
				showImg: [],
				title: '',
				code: '',
				updataData: [],
				submitContent: []
			};
		},
		onLoad(data) {
			this.code = data.code;
			this.title = data.name;
			this.getUpdataData(data.code);
		},
		methods: {
			enclosure(src, title) {
				uni.navigateTo({
					url: '/pages/index/webView?src=' + encodeURIComponent(src) + '&title=' + title
				})
			},
			changeReason(index) {
				this.$set(this.updataReason, index, !this.updataReason[index]);
			},
			changeImg(index) {
				this.$set(this.updataImg, index, !this.updataImg[index]);
			},
			// 删除图片
			deleteImg(index, index2) {
				uni.showModal({
					title: '删除文件',
					content: '确定删除文件?',
					success: res => {
						if (res.confirm) {			
							this.updataData[index].imgUrls.splice(index2, 1);
							this.submitContent[index].fileUrl.splice(index2, 1);
							this.submitContent[index].fileName.splice(index2, 1);
							this.submitContent[index].fileType.splice(index2, 1);
							this.submitContent[index].fileFlag.splice(index2, 1);
							this.submitContent[index].typeName.splice(index2, 1);
							// 响应式
							this.$set(this.showImg, index, false);
							this.$set(this.showImg, index, true);
							// 如果没有图片，不显示展示、收起样式
							if (this.updataData[index].imgUrls.length == 0) {
								this.isUpload = false;
								this.$set(this.showImg, index, false);
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 上传图片
			upload(indexContent) {
				if (9 - this.updataData[indexContent].imgUrls.length <= 0) {
					uni.showToast({
						title: '最多上传9张',
						icon: 'none'
					})
					return false
				}


				uni.chooseFile({
					// 设置不超过9张图片
					count: 9 - this.updataData[indexContent].imgUrls.length,
					success: res => {
						let tempFiles = res.tempFiles;
						res.tempFilePaths.forEach((item, index) => {
							if (parseInt(tempFiles[index].size / 1024) > 10240) {
								uni.showToast({
									title: '大小限制10M',
									icon: 'none'
								})
								return false
							}
							uni.uploadFile({
								url: this.$basePath + '/api/fileUpLoad?dir=itemfile',
								filePath: item,
								success: uploadFileRes => {

									if (JSON.parse(uploadFileRes.data).code == 200) {
										// 添加图片
										this.updataData[indexContent].imgUrls.push(JSON
											.parse(uploadFileRes.data).data);
										this.updataData[indexContent].isUpload = true;
										// 提示已上传
										// 展示图片
										this.$set(this.updataImg, indexContent, true);
										this.$set(this.showImg, indexContent, true);
										// 根据返回结果获取提交参数
										this.submitContent[indexContent].fileUrl.push(
											JSON.parse(uploadFileRes.data).data);
										this.submitContent[indexContent].fileName.push(
											tempFiles[index].name);
										this.submitContent[indexContent].fileType.push(
											this.updataData[indexContent]
											.fileType);
										this.submitContent[indexContent].fileFlag.push(
											'2')
										this.submitContent[indexContent].typeName.push(this
											.updataData[indexContent].typeName)
									} else {
										uni.showToast({
											title: JSON.parse(uploadFileRes
												.data).msg,
											icon: 'none'
										});
									}
								},
								fail: failContent => {
									uni.showToast({
										title: JSON.parse(uploadFileRes.data).msg,
										icon: 'none'
									});
								}
							});
						});
					}
				});
			},
			// 获取初始数据
			getUpdataData(sxCode) {
				this.$ajax({
					url: '/api/selectMyItemCorrect',
					method: 'get',
					headers: {
						accessToken: uni.getStorageSync('access_token')
					},
					data: {
						sxCode,
						userType: uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						this.updataData = res.data;
						res.data.forEach((item, index) => {
							this.updataData[index].imgUrls = [];
							this.updataReason.push(false);
							this.updataImg.push(false);
							this.showImg.push(false);

							// 根据返回结果获取提交参数
							this.submitContent[index] = {
								fileUrl: [],
								fileName: [],
								fileType: [],
								fileFlag: [],
								typeName: []
							}
						});
					}
				});
			},
			// 提交更正
			updateMyItemCorrect(){
				this.$ajax({
					url: '/api/wwwNews/updateMyItemCorrect',
					method: 'post',
					needAuth: true,
					contentType: 'application/json;charset=utf-8',
					params: {
						sxCode: this.code,
						fileVersion: '1'
					},
					data: JSON.stringify(this.submitContent)
				}).then(res => {
					if (res.code == 200) {
						// 如果成功跳转到我的办件
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.$emit('update', {
								type: '材料更正'
							})
							uni.navigateBack();
						}, 1000)
					}
				});
			},
			submit() {
				let flag = this.updataData.every((item, index) => {
					if (item.status == 2) {
						if (item.imgUrls.length != 0) {
							return true
							
						} else {
							return false
						}
					} else {
						this.submitContent[index].fileUrl.push('');
						this.submitContent[index].fileName.push('');
						this.submitContent[index].fileType.push(this.updataData[index].fileType);
						this.submitContent[index].fileFlag.push('2');
						this.submitContent[index].typeName.push('')
						return true
					}
				})
				if (!flag) {
					uni.showToast({
						title: '请补充完材料',
						icon: 'none'
					})
					return false
				}
				this.updateMyItemCorrect();
				
			}
		}
	};
</script>

<style lang="less" scoped>
	button:after {
		border: none;
	}

	.main {
		padding: 68rpx 40rpx 60rpx 50rpx;

		.title {
			font-size: 44rpx;
			color: #333333;
			font-weight: bold;
		}

		.step-title {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #333333;
			margin: 60rpx 0rpx 40rpx 0rpx;

			view {
				width: 6rpx;
				height: 36rpx;
				background-color: #3c90f2;
				border-radius: 2rpx;
				margin-right: 22rpx;
			}
		}

		.content-all {
			.content {
				text {
					color: #333333;
					font-size: 28rpx;
					line-height: 48rpx;
				}

				.shenglue {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.rejuct-reason {
					font-size: 28rpx;
					color: #333333;
					display: flex;
					line-height: 44rpx;

					.rejuct-title {
						color: #999999;
					}

					.open-reason {
						color: #5b96ff;
					}

					.close-reason {
						color: #5b96ff;
					}
					.L-main {
						word-break: break-all
					}
				}

				.btn-upload {
					margin: 40rpx 0rpx 30rpx 0rpx;
					width: 112rpx;
					height: 62rpx;
					color: #5b96ff;
					font-size: 28rpx;
					line-height: 62rpx;
					padding: 0rpx;
					border-radius: 5rpx;
					background-color: white;
					border: solid 1rpx #5b96ff;
				}

				.btn-uploaded {
					margin: 40rpx 0rpx 30rpx 0rpx;
					width: 140rpx;
					height: 62rpx;
					color: #b4b4b4;
					font-size: 28rpx;
					line-height: 62rpx;
					padding: 0rpx;
					border-radius: 5rpx;
					background-color: #f6f6f6;
				}

				.upload-img {
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;

					.files_list_group {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						&>view {
							margin-right: 40rpx;
							position: relative;
							display: flex;
							flex-direction: column;
							margin-bottom: 30rpx;
							width: 135rpx;

							&:nth-child(4n) {
								margin-right: 0;
							}

							image {
								width: 100%;
								height: 180rpx;
							}

							text {
								font-size: 22rpx;
								color: #333;
								width: 100%;
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.del {
								background: #FFFFFF;
								border-radius: 50%;
								display: block;
								position: absolute;
								right: -14rpx;
								top: -16rpx;
							}
						}
					}

					.img-box {
						width: 485rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						image {
							width: 135rpx;
							height: 180rpx;
							margin-bottom: 30rpx;
						}
					}

					.open-image {
						font-size: 32rpx;
						color: #5b96ff;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.close-image {
						font-size: 32rpx;
						color: #5b96ff;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.btn-submit {
			height: 80rpx;
			color: #ffffff;
			margin-top: 60rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			padding: 0rpx;
			border-radius: 10rpx;
			background-color: #5b96ff;
		}
	}
</style>
